<template>
	<view>
		<view class="header">
			<view class="box">
				<view class="a" v-if="this.id">
					<view class="top">
						<text>{{addresslist.username}}</text>
						<text>{{addresslist.userphone}}</text>
					</view>
					<view class="bot">
						<u-tag v-if="addresslist.status==1" size="mini" shape="circle" text="默认" type="error" plain
							plainFill>
						</u-tag>
						<u-tag size="mini" shape="circle" :text="`${addresslist.label}`" plain> </u-tag>
						<text> {{ addresslist.useraddress }}
						</text>
					</view>
				</view>

				<view class="address" @click="address" v-else>
					+点击完善收货地址
				</view>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view class="pin">
					<image src="../../static/Image/m-index/icon4.png" mode=""></image>
					<text>品牌精选</text>
				</view>
				<view class="">
					<text>以免运费 |</text>
					<text style="color: #FF6633;margin-left: 20rpx;">领券</text>
				</view>
			</view>
			<view class="zhong" v-for="item in orderlist" :key="item.id">
				<view class="l">
					<image :src=" 'http://localhost:3001'+ item.img" mode=""></image>
				</view>
				<view class="con">
					<view>{{item.goodsname}}</view>
					<view>￥{{item.price}}</view>
					<view>
						<text style="background-color: #FF6633;color: #fff;">七天无理由退货</text>
						<text style="padding-left: 200rpx;">x{{item.num}}</text>
					</view>
				</view>
			</view>
			<view class="text0">
				<text style="font-weight: bold;">发票类型</text>
				<text>不开发票 ></text>
			</view>
			<view class="text0">
				<text style="font-weight: bold;">售后免邮</text>
				<text style="color: #999999;">部分商家赠送</text>
			</view>
			<view class="text0">
				<text style="font-weight: bold;">卖家留言</text>
				<text style="color: #999999;">填写内容需要与商家协商并确认，45字以内</text>
			</view>
		</view>
		<view class="down">
			<view class="text0">
				<text style="font-weight: bold;">商品金额</text>
				<text>￥200</text>
			</view>
			<view class="text0">
				<text style="font-weight: bold;">优惠活动</text>
				<text style="color: #FF6633;">-￥200</text>
			</view>
			<view class="text0">
				<text style="font-weight: bold;">优惠券</text>
				<text style="color: #999999;">更多优惠券 ></text>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				<view class="">
					<text>合计</text>
					<text style="padding-left: 50rpx;color: #FF6633;">￥{{orderprice.countmoney}}</text>
				</view>
				<view class="">
					<text style="color: #999999;">已免运费</text>
					<text style="padding-left: 50rpx;color: #999999;">已优惠</text>
				</view>
			</view>
			<view class="right" @click="pay">
				确认订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addresslist,
		orderAdd
	} from '../../request/app.js'
	export default {
		data() {
			return {
				orderlist: [],
				orderprice: [],
				addresslist: []
			}
		},
		onLoad(options) {
			this.orderlist = uni.getStorageSync('arr')
			this.orderprice = uni.getStorageSync('orderInfo')
			this.id = options.id
			if (this.id) {
				addresslist({
					uid: uni.getStorageSync('userinfo').uid,
					id: this.id
				}, {
					authorization: uni.getStorageSync('userinfo').token
				}).then(res => {
					console.log(res, '地址渲染');
					if (res.data.code == 200) {
						this.addresslist = res.data.list[0]
					}
				})
			}
		},
		methods: {
			address() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			pay() {
				let orderInfo = uni.getStorageSync('orderInfo')
				orderAdd({
					uid: uni.getStorageSync('userinfo').uid,
					countmoney: orderInfo.countmoney,
					idstr: orderInfo.idstr,
					countnumber: orderInfo.countnumber
				}, {
					authorization: uni.getStorageSync('userinfo').token
				}).then(res => {
					console.log(res, 'pay');
					if (res.data.code == 200) {
						uni.navigateTo({
							url: '/pages/pay/pay?outTradeNo=' + res.data.list.outTradeNo
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.box .a {
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
		width: 100%;
	}

	.box .a .top text {
		padding-right: 20rpx;
	}

	.u-fade-enter-active[data-v-8e60ec6e] {
		margin-right: 20rpx;
	}

	.box .a .bot {
		display: flex;
		margin-top: 20rpx;
	}


	.header {
		background-color: #FF6633;
		height: 200rpx;
	}

	.header .box {
		margin-left: 25rpx;
		width: 700rpx;
		height: 250rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header .box .address {
		width: 400rpx;
		height: 100rpx;
		border: 1px solid #FF9900;
		border-radius: 20rpx;
		color: #FF9900;
		text-align: center;
		line-height: 100rpx;
	}

	.content {
		background-color: #fff;
		margin-top: 75rpx;
	}

	.content .top .pin image {
		width: 35rpx;
		height: 35rpx;
		margin-right: 20rpx;
	}

	.content .top {
		display: flex;
		justify-content: space-between;
	}

	.content .top .pin {
		display: flex;
		align-items: center;
	}

	.content .zhong {
		display: flex;
	}

	.content .zhong .con {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.content .zhong .l image {
		width: 250rpx;
		height: 260rpx;
		margin-right: 20rpx;
	}

	.content .text0 {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.down {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.down .text0 {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 10rpx 0;
	}

	.footer {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}

	.footer .left {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-left: 20rpx;
	}

	.footer .right {
		width: 250rpx;
		height: 120rpx;
		line-height: 120rpx;
		background-color: #FF6633;
		color: #fff;
		text-align: center;
	}
</style>
